<template>
  <div class="content">
    <div class="w-box">
      <span class="tab-top">全部订单</span>
      <span class="bu-r" style="margin-right:20px">待付款</span>
      <span class="bu-r" style="margin-right:20px">待收货</span>
      <span class="bu-r" style="margin-right:50px">待评价</span>
      <strong class="bu-r" style="margin-right:30px">我的常购商品</strong>
      <span class="bu-r" style="margin-right:20px">订单回收站</span><div style="float:right;margin-top:10px;margin-right:10px">
      <input style="width:800px"   autocomplete="off" placeholder="查询订单号/查询商品名" class="el-input__inner">
      <button>搜索</button>
      </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column width="1" class="box">
        <template slot-scope="scope">
          <div class="item">
            <span style="margin-left: 5%">{{ scope.row.date }}</span>
            <span style="margin-left: 8%"
              >订单编号：{{ scope.row.id }}&nbsp;&nbsp;&nbsp;
              <span>共<span style="color: #409eff">4</span>件</span></span
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column label="商品" align="center"  width="300" class="box">
        <template slot-scope="scope">
          <div class="mesSty" >  
          <img :src="scope.row.img" class="imgSty" alt="123" />
    
            {{ scope.row.shop }}
            
         
          </div>
        </template>
      </el-table-column>
      <el-table-column min-width="100" label="单价/数量" align="center" >
        <template slot-scope="scope">
          <div
            v-for="(item, index) in scope.row.children"
            :key="index"
            class="mesSty2"
          >
            <p>{{ item.name }}</p>
            <p>X2</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" min-width="140" label="商品状态" align="center" >
        <template slot-scope="scope">
          <div
            v-for="(item, index) in scope.row.children"
            :key="index"
            class="mesSty2"
          >
            <p>已导出</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" min-width="140" label="收货人" align="center" >
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column min-width="140" label="订单状态" align="center" >
        <template slot-scope="scope">
          <span>等待收货</span>
                    <el-button type="text" size="small" @click="btnClick(scope.row.id)"
            >确认详情</el-button
          >
          <div>
            <el-popover
              placement="left"
              title="物流详情"
              width="500opx"
              trigger="hover"
            >
            <el-timeline :reverse="reverse">
    <el-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      :timestamp="activity.timestamp">
      {{activity.content}}
    </el-timeline-item>
  </el-timeline>
              <el-button
               slot="reference"
                type="text"
                size="small"
                @click="btnClick(scope.row.id)"
                >跟踪</el-button
              >
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="price"
        valign="top"
        min-width="140"
         align="center" 
        label="实收款"
      />
      <el-table-column label="操作" align="center" min-width="140">
        <template slot-scope="scope">
          <el-button class="bu-box" type="text" size="small" @click="btnClick(scope.row.id)"
            >确认收货</el-button
          >
                                            <el-button class="bu-r" type="text" size="small" @click="btnClick(scope.row.id)"
            >取消订单</el-button
          >
                                                      <el-button type="text" size="small" @click="btnClick(scope.row.id)"
            >催单</el-button
          >
          
                    <el-button type="text" size="small" @click="btnClick(scope.row.id)"
            >查看发票</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    </div>
  </div>
</template>
<script>
import img from "../images/1.jpg";
export default {
  data() {
    return {
      visible: false,
      popSty: false,
       reverse: true,
      textarea: "",
      tableData: [
        {
          id: 611326403811565,
          date: "2022-0-16",
          name: "王小虎",
          price: "18796",
          shop:"荣耀Magic4 全新一代骁龙8 双曲屏设计 LTPO屏幕 潜望式长焦摄像头 7P广角主摄 5G 全网通版 8GB+256GB 釉白",
          img: require('../images/1.jpg'),
          children: [
            {
              name: "4499",
            },
            {
              name: "4899",
            },
          ],
        },
        {
          id: 613264038115633,
          date: "2021-05-01",
          name: "王小虎",
          price: "1650",
           shop:"Olay\\\\\\\/玉兰油新生塑颜大红瓶套装女补水紧致大红瓶护肤水霜套装 礼物",
           img: require('../images/oly.jpg'),
          children: [
            {
              name: "278",
            },
            {
              name: "547",
            },
          ],
        },
        {
          id: 6113312403811563,
          date: "2016-05-03",
          name: "王小虎",
          price: "198",
           shop:"片仔癀清痘洁肤乳 男女温和洁面乳 去粉刺控油祛痘洗面奶 100ml",
           img: require('../images/pzh.jpg'),
          children: [
            {
              name: "65",
            },
            {
              name: "34",
            },
          ],
        },
      ],
       activities: [
         
         {
         content: '包裹已出库',
          timestamp: '早上00:07'
        }, {
          content: '运输中',
          timestamp: '上午10:06您的包裹正在发往分拨中心'
        }, 
         {
          content: '运输中',
          timestamp: '上午12:06您的订单已从[北京航空中心发出]'
        }, 
        {
          content: '运输中',
          timestamp: '下午13:07 您的包裹已经进入网点准备配送'
        },
        {
          content: '派送中',
          timestamp: '下午14:06  派送员王小小正在为您派送感谢您的耐心等待'
        }, ],
    };
  },
  methods: {
    btnClick(id) {
      console.log(id);
    },
  },
};
</script>
 

 
<style scoped>
.tab-top{
  border-bottom: 3px rgb(157, 49, 49) solid;
  line-height: 60px;
  margin: 0px 20px;
  color: rgb(157, 49, 49);
}
.w-box{
  padding: auto 5px 5px 5px;
  border: 1px rgba(205, 203, 203, 0.792) solid;
}
.bu-r:hover{
  color: rgb(194, 11, 11);
  cursor: pointer;
}
.bu-box{
  border: 1px #05a40d solid;
  background: #fff;
  color: #05a40d;
  padding: 4px;
}
.bu-box:hover{
  background: #05a40d;
  color: #fff;
}
.content {
  padding: 20px;
}
.el-table--enable-row-transition /deep/ .cell {
  padding: 20px 0;
}
.item {
  width: 100vw;
  background: #f1f1f1;
  position: absolute;
  top: 0;
  left: -55px;
  z-index: 1;
  height: 50px;
  line-height: 50px;
}
</style>
<style scoped>
.imgSty {
  width: 100px;
  display: block;
  padding-left: 10px;
}
.mesSty {
  display: flex;
  align-items: center;
  padding: 40px 0;
  border-bottom: 1px solid #ebeef5;
}
.mesSty:last-child {
  padding-top: 20px;
  border-bottom: none;
  padding-bottom: 0px;
}
.mesSty2 {
  padding: 40px 0;
  border-bottom: 1px solid #ebeef5;
}
.mesSty2:last-child {
  padding-top: 20px;
  border-bottom: none;
  padding-bottom: 0px;
}
.content >>> .el-table--border td:nth-child(-n + 4) {
  border-right: none !important;
}
.content >>> .el-table--border td:nth-child(2) {
  border-left: 1px solid #ebeef5;
}
.content /deep/ .el-table__row td:nth-child(n + 6) .cell {
  position: absolute !important;
  top: 100px !important;
  left: 50%;
  transform: translateX(-50%);
}
.content /deep/ .el-table__row td:nth-child(1) .cell {
  position: absolute !important;
  top: -5px !important;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
}
.pb_sty span {
  background: #1dc8de;
  padding: 2px 8px;
  border-radius: 4px;
  color: #fff;
}

.mesFont p {
  margin-block-start: 0;
  margin-block-end: 0;
  padding: 0 10px;
}
.mesFont p:nth-child(2) {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* .el-table__row:hover .item {
  background-color: #eaf8ff;
} */
</style>

<style>
.el-cascader {
  width: 20%;
}
</style>
